<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .box1{
        width: 400px;
        height: 400px;
        background-color: rebeccapurple;
    }
    .box2{
        width: 1200px;
        height: 1200px;
        /* 背景图片 */
        background-image: url("1.jpg");
        /* 背景填充：默认是都填充的 */
        /* 无填充 */
        background-repeat: no-repeat;
        /* x轴平铺 */
        /* background-repeat: repeat-x; */
        /* y轴平铺 */
        /* background-repeat: repeat-y; */
        /* 背景图片的大小 */
        /* 1 */
        background-size: 4000px 4000px;
        /* 2 */
        /* background-size: 100% 100%; */
        /* 他会根据图片的大小来缩放保持纵横比不变，以达到填充满整个元素的效果，可能会把图片裁剪掉 */
        /* background-size: cover; */
        /* 图片完全覆盖元素，可能有空白,他也是保持纵横比不变，但是他也不会裁剪图片 */
        /* background-size: contain; */
        /* 设置背景图片的起始位置，默认是左上角，可以有多种组合，比如：center center; top left; bottom right;等等 */
        background-position: center center;
        }
</style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>